<template>
  <div class="back-div title-box" :style=style>
    <div class="item-title">
      <template v-if="$slots.header">
        <slot name="header"></slot>
      </template>
      <template v-else>
        <i :class="props.iconClass" class="title-icon"></i>
        <span>{{props.title}}</span>
        <template v-if="$slots.headerRight">
          <div class="rightContent">
            <slot name="headerRight"></slot>
          </div>
        </template>
      </template>
    </div>
    <div class="main-div p-4">
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import {computed} from "vue";
interface CoilEchartsType {
  width?:string;
  height?:string;
  title?:string;
  iconClass?:string;

}
const props = withDefaults(defineProps<CoilEchartsType>(),{
  width:"100%",
  height:"100%",
  title:"",
  iconClass:"fa fa-caret-right",

});

const style = computed(()=>{
  return `width:${props.width};height:${props.height}`
})

</script>

<style scoped>
@import "@/assets/coil-icon/iconfont.css";
.title-box{
  display: flex;
  flex-direction: column;
}
.title-icon{
  margin-right: 0.5rem;
  font-size: 1.2rem;
  color: var(--m-blue);
}
.item-title{
  font-size: 1rem;
  height: 3rem;
  line-height: 3rem;
  border-bottom: 1px solid #ccc;
  padding: 0 1rem;
}
.item-title span{
  font-weight: bold;
}
.main-div{
  flex-grow: 1;
  overflow-y: auto;
  height:auto;
}
.rightContent{
  float: right;
}

</style>